<template>
	<view style="height: 95vh;">
		<!-- 顶部 -->
		<u-sticky>
			<view class="topWrapper">
				<view class="searchBox">
					<view style="display: flex;" @tap="showStoreAlert=true">
						<text class="city">{{storeName}} </text>
						<u-icon name="arrow-down"></u-icon>
					</view>

					<view class="search">
						<u--input :value="inputValue" clearable border="none" fontSize="12" placeholder="请输入车牌号/车架号搜索"
							@blur="isSearch = false" @focus="isSearch = true" @change="searchChange" />
					</view>
				</view>
			</view>
		</u-sticky>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<u-radio-group v-model="currentCar.id">
				<view class="item" v-for="(item, index) in carList" :key="item.id">
					<view style="display: flex;align-items: center;"  @click.stop="checkedCar(item)">
						<view style="display: inline-block;width: 10%;">
							<u-radio active-color="#1573FF" :name="item.id"> </u-radio>
						</view>
						<view style="display: inline-block;width: 90%;">
							<view class="text-line">
								<text class="text-name">车牌号:</text>
								<text class="text-value">{{item.carNo}}</text>
							</view>
							
							<view class="text-line">
								<text class="text-name">车架号:</text>
								<text class="text-value">{{item.vinNo}}</text>
							</view>

							<view class="text-line">
								<text class="text-name">品牌/车系/车型:</text>
								<text class="text-value">{{item.carInfo}}</text>
							</view>

							<view class="text-line">
								<text class="text-name">归属门店:</text>
								<text class="text-value">{{item.belongingStoreName}}</text>
							</view>

							<view class="text-line">
								<text class="text-name">停靠门店:</text>
								<text class="text-value">{{item.locatedStoreName}}</text>
							</view>
						</view>
					</view>
				</view>
			</u-radio-group>
		</mescroll-body>
		<!-- 门店picker -->
		<u-picker :show="showStoreAlert" :columns="storeList" keyName="name" closeOnClickOverlay
			@close="showStoreAlert=false" @cancel="showStoreAlert=false" title="选择门店" confirmColor="#1573FF"
			@confirm="confimStore">
		</u-picker>
        <button type="info" class="sub-btn" @click="confimCar">确定</button>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		apiCarBasicList,
		apiCarServicing
	} from '@/api/car-api.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				inputValue: '',
				isSearch: false,
				showStoreAlert: false,
				storeId: '',
				storeName: '选择门店',
				status: 0,
				carList: [],
				currentCar:{
					id : '',
					carNo : ''
					
				}

			}
		},
		onLoad() {
			uni.$on('refreshCarList', () => {
				this.mescroll.triggerDownScroll();
			})
		},
		computed: {
			storeList() {
				var result = [this.$store.state.initData.initData.storeList];
				return result;
			}
		},
		methods: {
			upCallback(page) {
				apiCarBasicList({
					locatedStoreId: this.storeId,
					carNo: this.inputValue,
					type: 2,
					carStatus: 2,
					pageNum: page.num,
					pageSize: page.size,
				}).then(res => {
					//设置列表数据
					if (page.num == 1) this.carList = []; //如果是第一页需手动制空列表
					this.carList = this.carList.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//选择门店
			confimStore(e) {
				this.storeId = e.value[0].id;
				this.storeName = e.value[0].name;
				this.showStoreAlert = false;
				this.mescroll.triggerDownScroll();
			},
			//搜索
			searchChange(value) {
				this.inputValue = value;
				this.mescroll.triggerDownScroll();
			},
			//选择车辆
			checkedCar(item) {
			    this.currentCar = item;
				this.$forceUpdate();
			},
			confimCar() {
				uni.$emit('chooseCar', this.currentCar);
				
				uni.navigateBack({
				
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	.topWrapper {
		background-color: #fff;

		.searchBox {
			padding: 20upx;
			display: flex;
			align-items: center;
			background-color: #fff;

			.city {
				font-size: 30upx;
				font-weight: bold;
				color: #333;
			}

			.search {
				flex: 1;
				padding: 0 20upx;
				margin: 0 20upx;
				height: 60upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24upx;
				background-color: #ededed;
				border-radius: 8upx;
			}
		}
	}

	.item {
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 8rpx;
		margin: 10rpx 20rpx;
		padding: 10rpx;
	}

	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333;
		margin-left: 20rpx;
	}

	.text-warn {
		font-size: 24rpx;
		color: red;
		margin-right: 20rpx;
	}

	.text-warn-orange {
		color: yellow;
	}
	
	/deep/ .u-radio-group--row {
		display: inline !important;
	}
	
	/deep/ .u-radio {
		flex-direction: row-reverse !important;
	}
</style>
